<template>
  <div>
    <cus-modal
      ref="modal"
      :showFullscreen="true"
      :title="`${form.goodsName}-消耗明细`"
      :width="1280"
    >
      <Table
        border
        :loading="loading"
        :columns="columns"
        :data="data"
        :size="vuex_config.tableSize"
      >
      </Table>
      <div class="mt_20 cus_page">
        <cus-page
          :data="pages"
          class="mt_20"
          @pageChange="getGoodsConsumeDetailsApi()"
        ></cus-page>
      </div>
      <div slot="footer">
        <slot name="footer"> </slot>
      </div>
    </cus-modal>
  </div>
</template>

<script>
import { getGoodsConsumeDetails } from "@/api/business/manager";

const form = {
  id: "",
  goodsName: "", // 消耗明细名称
  goodsCode: "",
  unitWeight: "",
  packagingPrice: "",
  packagingUtil: ""
};
const columns = [
  {
    title: "序号",
    type: "index",
    width: 70,
    fixed: "left",
    align: "center"
  },
  {
    title: "物资名称",
    key: "goodsName",
    minWidth: 100,
    fixed: "left",
    align: "center"
  },
  {
    title: "物资编码",
    key: "goodsCode",
    minWidth: 110,
    align: "center"
  },
  {
    title: "物资种类",
    key: "goodsTypeName",
    minWidth: 100,
    align: "center"
  },
  // {
  //   title: "数量",
  //   key: "qtyTotal",
  //   minWidth: 100,
  //   align: "center"
  // },
  {
    title: "消耗数量",
    key: "packagingQty",
    minWidth: 100,
    align: "center"
  },
  {
    title: "单位重量(Kg)",
    key: "unitWeight",
    minWidth: 130,
    align: "center"
  },
  {
    title: "计量单位",
    key: "packagingUtil",
    minWidth: 100,
    align: "center"
  },
  {
    title: "单价(元)",
    key: "packagingPrice",
    minWidth: 100,
    align: "center"
  },
  {
    title: "金额合计(元)",
    key: "amountTotal",
    minWidth: 120,
    align: "center"
  },
  {
    title: "来源单号",
    key: "idSrc",
    minWidth: 145,
    align: "center"
  },
  {
    title: "出库方式",
    key: "consumeWay",
    minWidth: 100,
    align: "center",
    render: (h, params) => {
      return h("div", [
        h(
          "span",
          {
            style: {}
          },
          // （0 ：出库消耗，1：越库消耗）
          params.row.consumeWay == 0 ? "出库消耗" : "越库消耗"
        )
      ]);
    }
  },
  {
    title: "出库时间",
    key: "createTime",
    minWidth: 170,
    align: "center"
  }
];

export default {
  components: {},
  data() {
    return {
      loading: false,
      form, // 手工入库form表单
      columns, // 手工入库表头
      data: [], // 手工入库表数据
      pages: {
        page: 1,
        pageSize: 10,
        pageTotal: 0
      }
    };
  },

  mounted() {},
  methods: {
    show() {
      Object.assign(this.$data,this.$options.data())
      this.loading = false;
      this.$refs["modal"].show = true;
      this.$nextTick(() => {
        this.getGoodsConsumeDetailsApi();
      });
    },
    onCancel() {},
    // 查看消耗明细列表---------------------接口
    getGoodsConsumeDetailsApi() {
      return new Promise(resolve => {
        let params = {
          current: this.pages.page,
          size: this.pages.pageSize,
          goodsTypeName: this.form.goodsTypeName,
          goodsCode: this.form.goodsCode,
          unitWeight: this.form.unitWeight,
          packagingPrice: this.form.packagingPrice,
          packagingUtil: this.form.packagingUtil
        };
        getGoodsConsumeDetails(params).then(res => {
          if (res.retCode == 2000) {
            this.data = res.data.records;
            this.pages.pageTotal = res.data.total;
            resolve();
          }
        });
      });
    }
  }
};
</script>

<style lang="less" scoped></style>
